<template>
  <view class="body">
    <view class="select_c">
      <view class="title">派单</view>
      <view class="select_item">
        <text class="select_txt">常驻地区</text>
        <view class="select_right" @click="showAd = true">
          <text>{{ position ? position : "选择地区" }}</text>
          <u-icon name="arrow-right" color="#000" size="28"></u-icon>
        </view>
      </view>
      <view class="select_item">
        <text class="select_txt">上岗时间</text>
        <view class="select_right" @click="time_show = true">
          <text>{{ time_value ? time_value : "选择时间" }}</text>
          <u-icon name="arrow-right" color="#000" size="28"></u-icon>
        </view>
      </view>
      <view class="select_item" style="height: 122rpx">
        <view class="select_txt">
          <view>自动派接单</view>
          <view
            style="
              font-size: 24rpx;
              font-family: PingFang SC-Regular, PingFang SC;
              font-weight: 400;
              color: #8c8c8c;
            "
            >担心漏单？开启后，为你自动接起</view
          >
        </view>
        <view class="select_right">
          <u-switch
            v-model="checked"
            @change="checkedChange"
            size="60"
            active-color="red"
            inactive-color="#eee"
          ></u-switch>
        </view>
      </view>
    </view>
    <view class="order_num">
      <view class="title">单量</view>
      <view
        style="display: flex; justify-content: space-between; margin-top: 30rpx"
      >
        <view
          style="
            font-size: 26rpx;
            font-family: PingFang SC-Regular, PingFang SC;
            font-weight: 400;
            color: #262626;
          "
          >同时接单量</view
        >
        <view
          @click="order_show = true"
          style="
            font-size: 26rpx;
            font-family: PingFang SC-Regular, PingFang SC;
            font-weight: 600;
            color: #262626;
          "
        >
          <text>最大({{ order }})单</text>
          <u-icon name="arrow-right" color="#000" size="28"></u-icon>
        </view>
      </view>
      <view
        style="
          font-size: 24rpx;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #8c8c8c;
          margin-top: 10rpx;
        "
        >当接单量达到上限时，将无法抢单货派单</view
      >
    </view>
    <u-popup v-model="showAd" mode="bottom" safe-area-inset-bottom>
      <view class="picker-view-title">
        <div class="left" @click="showAd = false">取消</div>
        <div class="right" @click="confirm">确定</div>
      </view>
      <picker-view
        indicator-style="height:50rpx;"
        :value="defaultIndex"
        @change="selectChange"
        class="picker-view"
      >
        <picker-view-column>
          <view
            class="item"
            v-for="(item, index) in districtList_1"
            :key="index"
            >{{ item.name }}</view
          >
        </picker-view-column>
        <picker-view-column>
          <view
            class="item"
            v-for="(item, index) in districtList_2"
            :key="index"
            >{{ item.name }}</view
          >
        </picker-view-column>
        <picker-view-column>
          <view
            class="item"
            v-for="(item, index) in districtList_3"
            :key="index"
            >{{ item.name }}</view
          >
        </picker-view-column>
        <picker-view-column v-if="districtList_4.length > 0">
          <view
            class="item"
            v-for="(item, index) in districtList_4"
            :key="index"
            >{{ item.name }}</view
          >
        </picker-view-column>
        <picker-view-column v-if="districtList_5.length > 0">
          <view
            class="item"
            v-for="(item, index) in districtList_5"
            :key="index"
            >{{ item.name }}</view
          >
        </picker-view-column>
      </picker-view>
    </u-popup>
    <u-popup
      safe-area-inset-bottom
      v-model="time_show"
      @close="time_show = false"
      mode="bottom"
    >
      <view class="picker-view-title">
        <div class="left" @click="time_show = false">取消</div>
        <div class="right" @click="timeConfirm">确定</div>
      </view>
      <picker-view
        :indicator-style="indicatorStyle"
        :value="value"
        @change="bindChange"
        class="picker-view"
      >
        <picker-view-column>
          <view class="item" v-for="(item, index) in hours" :key="index"
            >{{ item }}时</view
          >
        </picker-view-column>
        <picker-view-column>
          <view class="item" v-for="(item, index) in minutes" :key="index"
            >{{ item }}分</view
          >
        </picker-view-column>
        <!-- <view class="box">至</view> -->
        <picker-view-column>
          <view class="item" v-for="(item, index) in hours2" :key="index"
            >{{ item }}时</view
          >
        </picker-view-column>
        <picker-view-column>
          <view class="item" v-for="(item, index) in minutes2" :key="index"
            >{{ item }}分</view
          >
        </picker-view-column>
      </picker-view>
    </u-popup>
    <u-popup
      safe-area-inset-bottom
      v-model="order_show"
      @close="order_show = false"
      mode="bottom"
    >
      <view class="picker-view-title">
        <div class="left" @click="order_show = false">取消</div>
        <div class="right" @click="orderConfirm">确定</div>
      </view>
      <picker-view
        :indicator-style="indicatorStyle"
        :value="order_num"
        @change="orderChange"
        class="picker-view"
      >
        <picker-view-column>
          <view
            class="item"
            v-for="(item, index) in order_num_list"
            :key="index"
            >{{ item }}</view
          >
        </picker-view-column>
      </picker-view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    const date = new Date();
    const hours = [];
    const hours2 = [];
    const minutes = [];
    const minutes2 = [];
    for (let i = 0; i <= 23; i++) {
      if (i < 10) {
        i = "0" + i;
      }
      hours.push(i);
    }
    for (let i = 0; i <= 59; i++) {
      if (i < 10) {
        i = "0" + i;
      }
      minutes.push(i);
    }
    for (let i = 0; i <= 23; i++) {
      if (i < 10) {
        i = "0" + i;
      }
      hours2.push(i);
    }
    for (let i = 0; i <= 59; i++) {
      if (i < 10) {
        i = "0" + i;
      }
      minutes2.push(i);
    }

    return {
      time_show: false,
      order_show: false,
      hour: date.getHours(),
      minute: date.getMinutes(),
      hour2: date.getHours(),
      minute2: date.getMinutes(),
      hours2,
      minutes2,
      hours,
      minutes,
      order_num: [0],
      order_value: "",
      checked: false,
      order_num_list: [0, 1, 2, 3, 4, 5],
      indicatorStyle: `height: 50px;`,
      //地址
      showAd: false,
      defaultIndex: [0, 0, 0, 0, 0],
      value: [0, 0, 0, 0],
      order: "0",
      districtList_1: [],
      districtList_2: [],
      districtList_3: [],
      districtList_4: [],
      districtList_5: [],
      district: [],
      position: "",
      time_value: "",
      form: {
        province_id: "",
        city_id: "",
        district_id: "",
        town_id: "",
        village_id: ""
      }
    };
  },
  onLoad(options) {
    this.getDistrict();
    let info = uni.getStorageSync("authData");
    this.position = info.courier.area_name.replace(/\//g, "-");
    this.time_value =
      JSON.parse(info.courier.work_time)[0].begin_time +
      "-" +
      JSON.parse(info.courier.work_time)[0].end_time;
    if (info.courier.is_auto == 0) {
      this.checked = false;
    } else {
      this.checked = true;
    }
    this.order = info.courier.max_num;
    let addressInfo = JSON.parse(info.courier.area)[0];
    this.form.province_id = addressInfo.province_id;
    this.form.city_id = addressInfo.city_id;
    this.form.district_id = addressInfo.district_id;
    this.form.town_id = addressInfo.town_id;
    this.form.village_id = addressInfo.village_id;
  },
  methods: {
    checkedChange(e) {
      this.checked = e;
      this.changeInfo();
    },
    bindChange: function (e) {
      const val = e.detail.value;
      if (val) {
        this.value = e.detail.value;
      }
    },
    async changeInfo() {
      let begin_time = this.time_value.split("-")[0];
      let end_time = this.time_value.split("-")[1];
      let is_auto = this.checked ? 1 : 0;
      let area = JSON.stringify([this.form]);
      const res = await this.$allrequest.distribution.editInfo(
        {
          work_time: JSON.stringify([{ begin_time, end_time }]),
          is_auto,
          area,
          max_num: this.order
        },
        true
      );
      const res1 = await this.$allrequest.distribution.getCourierInfo({}, true);

      uni.setStorageSync("authData", res1.data);
    },
    confirm() {
      this.showAd = false;
      let val = this.defaultIndex;
      let [i1, i2, i3, i4, i5] = val;
      this.form.province_id = this.districtList_1[i1].id;
      this.form.city_id = this.districtList_2[i2].id;
      this.form.district_id = this.districtList_3[i3].id;
      if (this.districtList_4.length > 0) {
        this.form.town_id = this.districtList_4[i4].id;
      }
      if (this.districtList_5.length > 0) {
        if (i5) {
          this.form.village_id = this.districtList_5[i5].id;
        } else {
          this.form.village_id = this.districtList_5[0].id;
        }
      }

      this.position = [];
      this.position[0] = this.districtList_1[i1].name;
      this.position[1] = this.districtList_2[i2].name;
      this.position[2] = this.districtList_3[i3].name;
      if (this.districtList_4.length > 0) {
        this.position[3] = this.districtList_4[i4].name;
      }
      if (this.districtList_5.length > 0) {
        if (i5) {
          this.position[4] = this.districtList_5[i5].name;
        } else {
          this.position[4] = this.districtList_5[0].name;
        }
      }
      this.position = this.position.join("-");
      this.changeInfo();
    },
    orderChange(e) {
      this.order_num = e.detail.value;
    },
    orderConfirm() {
      this.order_show = false;
      this.order = this.order_num_list[this.order_num[0]];
      this.changeInfo();
    },
    timeConfirm() {
      this.time_show = false;
      let time_v = this.value.map((item) => {
        if (item < 10) {
          return "0" + item;
        } else {
          return item;
        }
      });
      this.time_value =
        time_v[0] + ":" + time_v[1] + "-" + time_v[2] + ":" + time_v[3];
      this.changeInfo();
    },
    selectChange(e) {
      let indexs = e.detail.value;
      let yDefaultIndex = JSON.parse(JSON.stringify(this.defaultIndex));
      if (yDefaultIndex[0] != indexs[0]) {
        this.defaultIndex = [indexs[0], 0, 0, 0, 0];
      } else if (yDefaultIndex[1] != indexs[1]) {
        this.defaultIndex = [indexs[0], indexs[1], 0, 0, 0];
      } else if (yDefaultIndex[2] != indexs[2]) {
        (this.defaultIndex = [indexs[0], indexs[1], indexs[2], 0]), 0;
      } else if (yDefaultIndex[3] != indexs[3]) {
        this.defaultIndex = [indexs[0], indexs[1], indexs[2], indexs[3], 0];
      } else if (yDefaultIndex[4] != indexs[4]) {
        this.defaultIndex = [
          indexs[0],
          indexs[1],
          indexs[2],
          indexs[3],
          indexs[4]
        ];
      }
      this.districtList_2 = this.district[this.defaultIndex[0]].cityAll;
      this.districtList_3 =
        this.district[this.defaultIndex[0]].cityAll[
          this.defaultIndex[1]
        ].districtAll;
      this.districtList_4 =
        this.district[this.defaultIndex[0]].cityAll[
          this.defaultIndex[1]
        ].districtAll[this.defaultIndex[2]].townAll;
      if (this.districtList_4.length > 0) {
        this.districtList_5 =
          this.district[this.defaultIndex[0]].cityAll[
            this.defaultIndex[1]
          ].districtAll[this.defaultIndex[2]].townAll[
            this.defaultIndex[3]
          ].villageAll;
      } else {
        this.districtList_5 = [];
      }
    },
    setAddressList(list = []) {
      let cityList,
        districtList,
        provinceIndex = 0,
        cityIndex = 0,
        districtIndex = 0;

      if (list && list.length) {
        cityList = this.district.find(
          (el) => String(list[0]) === el.id
        ).cityAll;
        districtList = cityList.find(
          (el) => String(list[1]) === el.id
        ).districtAll;
        provinceIndex = this.district.findIndex(
          (el) => String(list[0]) === el.id
        );
        cityIndex = cityList.findIndex((el) => String(list[1]) === el.id);
        districtIndex = districtList.findIndex(
          (el) => String(list[2]) === el.id
        );
      } else {
        let cityAllItem = JSON.parse(JSON.stringify(this.district[0].cityAll));
        cityList = cityAllItem;
        districtList = cityList[0].districtAll;
      }
      this.districtList_2 = JSON.parse(JSON.stringify(cityList)).map((el) => {
        delete el.districtAll;
        return el;
      });
      this.districtList_4 = districtList[0].townAll;

      this.districtList_3 = districtList;
      if (this.districtList_4[0]) {
        this.districtList_5 = this.districtList_4[0].villageAll;
      }
      this.defaultIndex = [provinceIndex, cityIndex, districtIndex];
    },
    async getDistrict() {
      var res = await this.$allrequest.user.get_district({});
      this.district = JSON.parse(JSON.stringify(res.data));
      this.districtList_1 = res.data.map((item) => {
        delete item.cityAll;
        return item;
      });
      this.setAddressList();
    }
  }
};
</script>

<style lang="scss" scoped>
.body {
  min-height: 100vh;
  background: #f8f8f8;
  padding: 24rpx;

  .select_c {
    width: 702rpx;
    height: 360rpx;
    background: #ffffff;
    padding: 24rpx;
    border-radius: 20rpx 20rpx 20rpx 20rpx;

    .title {
      font-size: 30rpx;
      font-family: PingFang SC-Semibold, PingFang SC;
      font-weight: 600;
      color: #262626;
      // margin-bottom: 24rpx;
    }

    .select_item {
      // width: 100%;
      height: 84rpx;
      border-bottom: 2rpx solid #f8f8f8;
      display: flex;
      justify-content: space-between;
      align-items: center;
      &:last-child {
        border: 0;
      }
      .select_txt {
        font-size: 26rpx;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #262626;
      }

      .select_right {
        font-size: 26rpx;
        font-family: PingFang SC-Semibold, PingFang SC;
        font-weight: 600;
        color: #262626;
      }
    }
  }

  .picker-view-title {
    padding: 20rpx;
    font-size: 28rpx;
    color: #1aa034;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .left {
      color: #999;
    }
  }

  .picker-view {
    width: 750rpx;
    height: 500rpx;

    .item {
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
    }

    .box {
      position: absolute;
      left: 360rpx;
      top: 280rpx;
    }
  }
  .order_num {
    width: 702rpx;
    height: 188rpx;
    background: #ffffff;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    padding: 24rpx;
    opacity: 1;
    margin: 24rpx auto;
    .title {
      font-size: 30rpx;
      font-family: PingFang SC-Semibold, PingFang SC;
      font-weight: 600;
      color: #262626;
      // margin-bottom: 24rpx;
    }
  }
}
</style>
